<!-- src/views/sandi/tuxing.vue -->
<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'Tuxing',
  setup() {
    const chartContainer = ref<HTMLDivElement | null>(null)
    let myChart: echarts.ECharts | null = null

    const initChart = () => {
      if (chartContainer.value) {
        // 初始化图表
        myChart = echarts.init(chartContainer.value)
        
        // 配置项
        const option = {
          // 整体背景
          backgroundColor: '#0f1a20',
          
          // 图表布局
          grid: {
            left: '20%',
            right: '35%',
            top: '20%',
            bottom: '20%'
          },
          
          // 饼图系列
          series: [
            {
              type: 'pie',
              radius: ['30%', '50%'], // 进一步缩小饼图大小
              center: ['40%', '30%'],
              data: [
                { value: 25, name: '媒体名称A', itemStyle: { color: '#e86c6c' } },
                { value: 15, name: '媒体名称B', itemStyle: { color: '#9b9bcb' } },
                { value: 10, name: '媒体名称C', itemStyle: { color: '#c29cfb' } },
                { value: 3, name: '媒体名称D', itemStyle: { color: '#66d9ff' } },
                { value: 15, name: '媒体名称E', itemStyle: { color: '#f5c86c' } },
                { value: 16, name: '媒体名称F', itemStyle: { color: '#66d9ff' } }
              ],
              label: {
                show: true,
                position: 'outside',
                formatter: '{c}%',
                fontSize: 8, // 缩小标签字体
                color: '#fff',
                distance: 8
              },
              labelLine: {
                length: 6,
                length2: 6,
                lineStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              roseType: 'radius',
              avoidLabelOverlap: false,
              hoverAnimation: true
            }
          ],
          
          // 自定义图例（右侧）
          graphic: [
            {
              type: 'group',
              left: '70%',
              top: '20%',
              children: [
                // 图例容器
                {
                  type: 'rect',
                  shape: {
                    x: 0,
                    y: 0,
                    width: 150, // 缩小图例容器
                    height: 100
                  },
                  style: {
                    fill: 'rgba(0, 0, 0, 0.5)',
                    stroke: '#2dcc99',
                    lineWidth: 1,
                    opacity: 0.8
                  }
                },
                // 图例项 - 媒体名称A
                {
                  type: 'rect',
                  shape: {
                    x: 10,
                    y: 8,
                    width: 10,
                    height: 10
                  },
                  style: {
                    fill: '#e86c6c'
                  }
                },
                {
                  type: 'text',
                  left: 22,
                  top: 12,
                  style: {
                    text: '媒体名称A',
                    fill: '#fff',
                    fontSize: 8 // 缩小图例字体
                  }
                },
                // 图例项 - 媒体名称B
                {
                  type: 'rect',
                  shape: {
                    x: 10,
                    y: 24,
                    width: 10,
                    height: 10
                  },
                  style: {
                    fill: '#9b9bcb'
                  }
                },
                {
                  type: 'text',
                  left: 22,
                  top: 28,
                  style: {
                    text: '媒体名称B',
                    fill: '#fff',
                    fontSize: 8
                  }
                },
                // 图例项 - 媒体名称C
                {
                  type: 'rect',
                  shape: {
                    x: 10,
                    y: 40,
                    width: 10,
                    height: 10
                  },
                  style: {
                    fill: '#c29cfb'
                  }
                },
                {
                  type: 'text',
                  left: 22,
                  top: 44,
                  style: {
                    text: '媒体名称C',
                    fill: '#fff',
                    fontSize: 8
                  }
                },
                // 图例项 - 媒体名称D
                {
                  type: 'rect',
                  shape: {
                    x: 10,
                    y: 56,
                    width: 10,
                    height: 10
                  },
                  style: {
                    fill: '#66d9ff'
                  }
                },
                {
                  type: 'text',
                  left: 22,
                  top: 60,
                  style: {
                    text: '媒体名称D',
                    fill: '#fff',
                    fontSize: 8
                  }
                },
                // 图例项 - 媒体名称E
                {
                  type: 'rect',
                  shape: {
                    x: 10,
                    y: 72,
                    width: 10,
                    height: 10
                  },
                  style: {
                    fill: '#f5c86c'
                  }
                },
                {
                  type: 'text',
                  left: 22,
                  top: 76,
                  style: {
                    text: '媒体名称E',
                    fill: '#fff',
                    fontSize: 8
                  }
                },
                // 图例项 - 媒体名称F
                {
                  type: 'rect',
                  shape: {
                    x: 10,
                    y: 88,
                    width: 10,
                    height: 10
                  },
                  style: {
                    fill: '#66d9bff'
                  }
                },
                {
                  type: 'text',
                  left: 22,
                  top: 92,
                  style: {
                    text: '媒体名称F',
                    fill: '#fff',
                    fontSize: 8
                  }
                }
              ]
            }
          ]
        }

        // 设置配置项
        myChart.setOption(option)
      }
    }

    // 组件挂载后初始化图表
    onMounted(() => {
      initChart()
      
      // 响应窗口大小变化
      window.addEventListener('resize', () => {
        if (myChart) {
          myChart.resize()
        }
      })
    })

    // 组件卸载前销毁图表
    onUnmounted(() => {
      if (myChart) {
        myChart.dispose()
      }
    })

    return {
      chartContainer
    }
  }
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 350px; /* 缩小容器高度 */
}
</style>